<template>
	<!-- 展示盒子区域 -->
	<div id="container"></div>
</template>

<script>
// 引入three
import * as THREE from "three";
// 引入控制器
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
// 引入控制面板
// import GUI from "lil-gui";
// 引入动画库
import * as TWEEN from "@tweenjs/tween.js";
// vue3中這連個不能用響應式的寫法會報錯
let scene = null; //场景
// let mesh = null; // 网格模型
export default {
	data() {
		return {
			camera: null, // 相机
			renderer: null, //渲染器
			controls: null, //控制器
		};
	},
	mounted() {
		this.init();
		this.animate();
	},
	methods: {
		//1.初始化
		init: function () {
			// 1. 创建场景对象Scene
			scene = new THREE.Scene();

			/**
			 * 3.创建相机并设置
			 */
			// 获取盒子
			let container = document.getElementById("container");
			// 创建相机
			this.camera = new THREE.PerspectiveCamera(
				60,
				container.clientWidth / container.clientHeight,
				0.04,
				3000
			);

			this.camera.lookAt(0, 0, 0);
			/**
			 * 4.创建渲染器对象
			 */
			this.renderer = new THREE.WebGLRenderer({
				antialias: true,
			});
			// 设置渲染器的宽高为盒子的宽高
			this.renderer.setSize(
				container.clientWidth,
				container.clientHeight
			);
			// 添加渲染器到盒子中
			container.appendChild(this.renderer.domElement);

			//5.创建控件对象 没有这个就不能缩放拖拽
			this.controls = new OrbitControls(
				this.camera,
				this.renderer.domElement
			);

      //创建buffer几何体 绘制贝塞尔曲线
      const geometry = new THREE.BufferGeometry();
      // 创建曲线
      const curve = new THREE.CubicBezierCurve3(
        new THREE.Vector3(-10, -20, -10),
        new THREE.Vector3(-10, 40, -10),
        new THREE.Vector3(10, 40, 10),
        new THREE.Vector3(10, -20, 10)
      );
      // getPoints 方法从曲线中获取点
      const points = curve.getPoints(100);


      // 创建材质
      const material = new THREE.LineBasicMaterial({ color: 0xff0000 });

      // 绑定顶点到空几何体
      geometry.setFromPoints(points);
      
      const line = new THREE.Line(geometry, material);
      scene.add(line);
			this.camera.position.z = 50;
			this.animate();
		},

		// 渲染函数
		animate() {
			// 切换相机位置必须要在这里执行这一步
			TWEEN.update();
			this.renderer.render(scene, this.camera);
			requestAnimationFrame(this.animate);
		},
	},
};
</script>

<style>
#container {
	width: 100%;
	height: 100%;
}
</style>
